<template>
  <div class="locks-box">
    <div class="locks-box-top aroundbox">
      <!-- 智能锁控 -->
      <div class="locklontrol-box borderStyle centerbox relative">
        <div class="title centertitleStyle centerbox title-relative">智能锁控</div>
        <div class="device-chart">
          <LockControl :datas="lockControlPieData" />
        </div>
        <div class="device-text">
          <LockTable :datas="lockControlTableData" :typename="'智能锁控'" @goSecond="goSecond" />
        </div>
      </div>
      <!-- 门禁控制 -->
      <div class="entranceguard-box borderStyle centerbox relative">
        <div class="title centertitleStyle centerbox title-relative">门禁控制</div>
        <div class="device-chart">
          <LockEntranceGuard :datas="LockEntranceGuardPieData" />
        </div>
        <div class="device-text">
          <LockTable :datas="LockEntranceGuardTableData" :typename="'门禁控制'" @goSecond="goSecond" />
        </div>
      </div>
    </div>
    <div class="locks-box-bottom aroundbox">
      <!-- 五防钥匙箱 -->
      <div class="keybox borderStyle centerbox relative">
        <div class="title centertitleStyle centerbox title-relative">五防钥匙箱</div>
        <div class="device-chart">
          <KeyBox :datas="KeyBoxPieData" />
        </div>
        <div class="device-text">
          <LockTable :datas="KeyBoxTableData" :typename="'五防钥匙箱'" @goSecond="goSecond" />
        </div>
      </div>
      <!-- 一匙通 -->
      <div class="keylinks borderStyle centerbox relative">
        <div class="title w-tie centertitleStyle centerbox title-relative">一匙通</div>
        <div class="device-chart">
          <KeyLinks />
        </div>
        <div class="device-text">
          <LockTable :datas="KeyLinksTableData" :typename="'一匙通'" @goSecond="goSecond" />
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { EChartOption } from "echarts";
import LockControl from "../LockControl/index.vue";
import LockEntranceGuard from "../LockEntranceGuard/index.vue";
import KeyBox from "../KeyBox/index.vue";
import KeyLinks from "../KeyLinks/index.vue";
import LockTable from "../../../../components/LockTable/index.vue";
import { GetSocketModule } from "@/store/modules/GetSocketData";
import { publicAPIModule } from "@/store/modules/public";
@Component({
  components: {
    LockControl,
    LockEntranceGuard,
    LockTable,
    KeyBox,
    KeyLinks,
  },
})
export default class Locks extends Vue {
  // 锁具首页的数据
  get lockDatas() {
    var getterAllAuxiliaryByXtId =
      GetSocketModule.getterAllAuxiliaryByXtId || {};
    var AllAuxiliaryBySbId = GetSocketModule.AllAuxiliaryBySbId || {};
    var list0201 = AllAuxiliaryBySbId["0201"] || []; //门禁控制
    var list07 = getterAllAuxiliaryByXtId["07"] || []; //锁控系统
    var list08 = getterAllAuxiliaryByXtId["08"] || []; //五防钥匙箱

    let obj = {};
    function getDeviceData(dwList: any[]) {
      let totalObj = {};
      var deviceData = {
        totalNumberDevices: 0,
        alarmNumber: 0,
        numberNormal: 0,
        failureNumber: 0,
      };
      // 把点位数组循环一遍，筛选出告警的设备id和非告警的设备id
      dwList.map((k, j) => {
        // 数据都是多个变电站的，需要对设备的数组重新做处理，把变电站id和设备id拼接起来
        var newId = k.stationId + k.deviceId;
        totalObj[newId] = totalObj[newId] || "fgj";
        if (k.isGj === "gj") {
          totalObj[newId] = "gj";
        }
      });
      // 把设备id告不告警的数组循环一遍，拿到三个数
      for (let key in totalObj) {
        deviceData.totalNumberDevices++;
        if (totalObj[key] === "gj") {
          deviceData.alarmNumber++;
        } else if (totalObj[key] === "fgj") {
          deviceData.numberNormal++;
        }
      }
      return deviceData;
    }
    obj = {
      list0201: getDeviceData(list0201) || {},
      list07: getDeviceData(list07) || {},
      list08: getDeviceData(list08) || {},
    };
    // console.log("obj:", obj);

    return obj;
  }
  // 智能锁控-饼图
  get lockControlPieData() {
    var arr = [
      {
        name: "设备告警数",
        value: this.lockDatas["list07"].alarmNumber || 0,
      },
      {
        name: "设备在线数",
        value: this.lockDatas["list07"].numberNormal || 0,
      },
      {
        name: "通讯故障数",
        value: 0,
      },
    ];
    // console.log("arr:", arr);

    return arr;
  }
  // 智能锁控-表格
  get lockControlTableData() {
    var arr = [
      {
        name: "设备总数",
        value: this.lockDatas["list07"].totalNumberDevices || 0,
      },
      {
        name: "设备告警数",
        value: this.lockDatas["list07"].alarmNumber || 0,
      },
      {
        name: "设备在线数",
        value: this.lockDatas["list07"].numberNormal || 0,
      },
      {
        name: "通讯故障数",
        value: 0,
      },
    ];

    return arr;
  }
  // 门禁控制-饼图
  get LockEntranceGuardPieData() {
    var arr = [
      {
        name: "设备告警数",
        value: this.lockDatas["list0201"].alarmNumber || 0,
      },
      {
        name: "设备在线数",
        value: this.lockDatas["list0201"].numberNormal || 0,
      },
      {
        name: "通讯故障数",
        value: 0,
      },
    ];

    return arr;
  }
  // 门禁控制-表格
  get LockEntranceGuardTableData() {
    var arr = [
      {
        name: "设备总数",
        value: this.lockDatas["list0201"].totalNumberDevices || 0,
      },
      {
        name: "设备告警数",
        value: this.lockDatas["list0201"].alarmNumber || 0,
      },
      {
        name: "设备在线数",
        value: this.lockDatas["list0201"].numberNormal || 0,
      },
      {
        name: "通讯故障数",
        value: 0,
      },
    ];

    return arr;
  }
  // 五防钥匙箱-饼图
  get KeyBoxPieData() {
    var arr = [
      {
        name: "设备告警数",
        value: this.lockDatas["list08"].alarmNumber || 0,
      },
      {
        name: "设备在线数",
        value: this.lockDatas["list08"].numberNormal || 0,
      },
      {
        name: "通讯故障数",
        value: 0,
      },
    ];

    return arr;
  }
  // 五防钥匙箱-表格
  get KeyBoxTableData() {
    var arr = [
      {
        name: "设备总数",
        value: this.lockDatas["list08"].totalNumberDevices || 0,
      },
      {
        name: "设备告警数",
        value: this.lockDatas["list08"].alarmNumber || 0,
      },
      {
        name: "设备在线数",
        value: this.lockDatas["list08"].numberNormal || 0,
      },
      {
        name: "通讯故障数",
        value: 0,
      },
    ];

    return arr;
  }

  get KeyLinksTableData() {
    var arr = [
      {
        name: "设备总数",
        value: 0,
      },
      {
        name: "设备告警数",
        value: 0,
      },
      {
        name: "设备在线数",
        value: 0,
      },
      {
        name: "通讯故障数",
        value: 0,
      },
    ];

    return arr;
  }
  get SubstationList() {
    return publicAPIModule.SubstationList[0];
  }

  public goSecond(val: any) {
    // console.log(val);

    /*
  val:  {
      item: item,
      typename: this.typename,
    }*/
    if (val.typename === "智能锁控") {
      this.$router.push({
        path: "LockControlPage",
        query: this.SubstationList,
      });
      // console.log(val);
    } else if (val.typename === "门禁控制") {
      this.$router.push({
        path: "EntranceGuardPage",
        query: this.SubstationList,
      });
      // console.log(val);
    } else if (val.typename === "五防钥匙箱") {
      this.$router.push({
        path: "KeyBoxPage",
        query: this.SubstationList,
      });
    } else if (val.typename === "一匙通") {
      this.$router.push({
        path: "KeyLinksPage",
        query: this.SubstationList,
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.locks-box {
  width: 100%;
  height: 100%;
  color: #fff;
  &-top {
    width: 100%;
    height: 50%;
    display: flex;
    .locklontrol-box,
    .entranceguard-box {
      width: calc(50% - 0.2rem);
      margin-right: 0.1rem;
      margin-left: 0.1rem;
      height: 90%;
      display: flex;
      align-items: center;
      .title {
        cursor: pointer;
        z-index: 1;
      }
      .device-chart {
        width: 55%;
      }
      .device-text {
        width: 45%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
  &-bottom {
    width: 100%;
    height: 50%;
    display: flex;
    margin-top: -1%;
    .keybox,
    .keylinks {
      width: calc(50% - 0.2rem);
      height: 90%;
      display: flex;
      align-items: center;
      margin-right: 0.1rem;
      margin-left: 0.1rem;
      .title {
        cursor: pointer;
        z-index: 1;
      }
      .w-tie {
        width: 1.02rem;
      }
      .device-chart {
        width: 55%;
      }
      .device-text {
        width: 45%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}
</style>
